<template>
  <div>
    <!-- <vision /> -->
    <component
      v-for="item in sortedComponents"
      :key="item.regionId + item.titel"
      :id="`anchor-${item.regionId}`"
      :is="item.component"
      :title="item.titel"
      :regionId="item.regionId"
      dbClickPlaceholder="---"
      class="py-[0.001rem] box-border"
      :vision_data="vision_data"
      :vision_projectId="vision_projectId"
      :computer_optometry_data="computer_optometry_data"
      :computer_optometry_projectId="computer_optometry_projectId"
      :iop_data="iop_data"
      :iop_projectId="iop_projectId"
      :od_os_data="od_os_data"
      :od_os_projectId="od_os_projectId"
      :subjectivity_data="subjectivity_data"
      :subjectivity_projectId="subjectivity_projectId"
      :optometrist_query_data="optometrist_query_data"
      :optometrist_query_projectId="optometrist_query_projectId"
      :visual_function_niu_data="visual_function_niu_data"
      :visual_function_niu_projectId="visual_function_niu_projectId"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

// import vision from "./component/vision.vue"; // 视力

import VisualChart from "./component/VisualChart.vue";
import ComputerOptometry from "./component/ComputerOptometry.vue";
import SubjectiveRefraction from "./component/SubjectiveRefraction.vue";
import IntraocularTension from "./component/IntraocularTension.vue";
import BioMeasurement from "./component/BioMeasurement.vue";
import OptometristQuery from "./component/OptometristQuery.vue";
import VisualFunctionNiu from "./component/VisualFunction_niu.vue";

import { handleApiResponse } from "@/utils/request.js";
import { QueryRegion } from "../../../../../../wailsjs/go/api/ReportApi.js";

// const userStore = useUserStore();
// const { checkDetailForm } = storeToRefs(userStore);

onMounted(() => {
  getRegionList();
});

const props = defineProps({
  modelValue: {
    type: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
});

let components = [
  {
    regionId: 1,
    sort: 0,
    titel: "视力表",
    hidden: true,
    component: VisualChart,
  },
  {
    regionId: 2,
    sort: 0,
    titel: "电脑验光",
    hidden: true,
    component: ComputerOptometry,
  },
  {
    regionId: 3,
    sort: 0,
    titel: "眼压",
    component: IntraocularTension,
    hidden: true,
  },
  {
    regionId: 4,
    sort: 0,
    titel: "生物测量",
    hidden: true,
    component: BioMeasurement,
  },
  {
    regionId: 5,
    sort: 0,
    titel: "主观验光",
    hidden: true,
    component: SubjectiveRefraction,
  },
  {
    regionId: 7,
    sort: 0,
    titel: "配镜参数",
    hidden: true,
    component: OptometristQuery,
  },
  {
    regionId: 8,
    sort: 0,
    titel: "视功能(牛眼)",
    hidden: true,
    component: VisualFunctionNiu,
  },
];

const sortedComponents = computed(() => {
  return components
    .sort((a, b) => a.regionId - b.regionId)
    .filter((item) => item.hidden);
});

const regionData = ref([]);

// 1:视力
const vision_data = ref({}); // 视力
const vision_projectId = ref(null); // 视力项目id

// 2:电脑验光
const computer_optometry_data = ref({}); // 电脑验光
const computer_optometry_projectId = ref(null); // 电脑验光项目id

// 3:眼压
const iop_data = ref({}); // 眼压
const iop_projectId = ref(null); // 眼压项目id

// 4.生物测量 aop
const od_os_data = ref({}); // OD / 右眼 ，  OS / 左眼
const od_os_projectId = ref(null); // OD / 右眼 ，  OS / 左眼项目id

// 5.主观验光
const subjectivity_data = ref({}); // 主观验光
const subjectivity_projectId = ref(null); // 主观验光项目id

// 7.配镜参数
const optometrist_query_data = ref({}); // 配镜参数
const optometrist_query_projectId = ref(null); // 配镜参数项目id

// 8.视功能(牛眼)
const visual_function_niu_data = ref({}); // 视功能(牛眼)
const visual_function_niu_projectId = ref(null); // 视功能(牛眼)项目id
async function getRegionList() {
  const projectIds = props.modelValue.projectList.map((item) => item.id) || [];

  handleApiResponse(() =>
    QueryRegion({
      checklistId: props.modelValue.id,
      projectIds: projectIds,
    })
  ).then((res) => {
    handleEmptyRegionData();
    if (res.code == 0) {
      // console.log("单个检查单区域数据", res);
      regionData.value =
        res.data.regionInfos.map((item) => {
          return {
            regionId: item.regionId,
            regionName: item.regionName,
            projectId: item.projectId,
            regionResult: JSON.parse(item.regionResult || "[]"),
          };
        }) || [];

      regionData.value.forEach((item) => {
        if (item.regionId == 1) {
          // 视力
          item.regionResult.forEach((item) => {
            vision_data.value[item.datapointTypeValue] = item.value || "";
          });

          vision_projectId.value = item.projectId;
        } else if (item.regionId == 2) {
          // 电脑验光
          item.regionResult.forEach((item) => {
            computer_optometry_data.value[item.datapointTypeValue] =
              item.value || "";
          });
          computer_optometry_projectId.value = item.projectId;
        } else if (item.regionId == 3) {
          // 眼压
          item.regionResult.forEach((item) => {
            iop_data.value[item.datapointTypeValue] = item.value || "";
          });
          iop_projectId.value = item.projectId;
        } else if (item.regionId == 4) {
          // OD / 右眼 ，   OS / 左眼
          item.regionResult.forEach((item) => {
            od_os_data.value[item.datapointTypeValue] = item.value || "";
          });
          od_os_projectId.value = item.projectId;
        } else if (item.regionId == 5) {
          // 主观验光
          item.regionResult.forEach((item) => {
            subjectivity_data.value[item.datapointTypeValue] = item.value || "";
          });
          subjectivity_projectId.value = item.projectId;
        } else if (item.regionId == 7) {
          // 配镜参数
          item.regionResult.forEach((item) => {
            optometrist_query_data.value[item.datapointTypeValue] =
              item.value || "";
          });
          optometrist_query_projectId.value = item.projectId;
        } else if (item.regionId == 8) {
          // 视功能(牛眼)
          item.regionResult.forEach((item) => {
            visual_function_niu_data.value[item.datapointTypeValue] =
              item.value || "";
          });
          visual_function_niu_projectId.value = item.projectId;
        }
      });

      // setStorageWithEvent("refresh_check_region_data", {
      //   vision_data: vision_data.value, // 1.视力
      //   vision_projectId: vision_projectId.value,
      //   computer_optometry_data: computer_optometry_data.value, // 2.电脑验光
      //   computer_optometry_projectId: computer_optometry_projectId.value,
      //   iop_data: iop_data.value, // 3.眼压
      //   iop_projectId: iop_projectId.value,
      //   od_os_data: od_os_data.value, // 4.生物测量
      //   od_os_projectId: od_os_projectId.value,
      //   subjectivity_data: subjectivity_data.value, // 5.主观验光
      //   subjectivity_projectId: subjectivity_projectId.value,
      //   optometrist_query_data: optometrist_query_data.value, // 7.配镜参数
      //   optometrist_query_projectId: optometrist_query_projectId.value,
      //   visual_function_niu_data: visual_function_niu_data.value, // 8.视功能(牛眼)
      //   visual_function_niu_projectId: visual_function_niu_projectId.value,
      // });
    }
  });
}

// 清空区域数据点
const handleEmptyRegionData = () => {
  vision_data.value = {}; // 1.视力
  vision_projectId.value = null;
  computer_optometry_data.value = {}; // 2.电脑验光
  computer_optometry_projectId.value = null;
  iop_data.value = {}; // 3.眼压
  iop_projectId.value = null;
  od_os_data.value = {}; // 4.生物测量
  od_os_projectId.value = null;
  subjectivity_data.value = {}; // 5.主观验光
  subjectivity_projectId.value = null;
  optometrist_query_data.value = {}; // 7.配镜参数
  optometrist_query_projectId.value = null;
  visual_function_niu_data.value = {}; // 8.视功能(牛眼)
  visual_function_niu_projectId.value = null;
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("check_anchor_jump", (e) => {
    const anchor = document.getElementById(`anchor-${e.data.elementId}`);

    if (anchor) {
      anchor.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    }
  });

  // 组件卸载时清理监听
  return () => cleanup();
});
</script>

<style scoped lang="scss">
.table {
  border-collapse: collapse; // 合并表格边框
  @apply w-full border border-solid border-[#ccc] text-center mt-3;

  tr {
    @apply h-[3em];
  }
  th,
  td {
    border: 1px solid #ebeef5;
    padding: 3px 10px;
    box-sizing: border-box;
  }

  .title_bg {
    @apply bg-[#f5f7fa];
  }

  thead {
    .set_bg {
      width: 15%;
      min-width: 150px;
      background-color: #71c9ce;
      color: white;
    }
  }

  tbody {
  }
}
</style>